<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(obj, index) in breadcrumbList" :key="index">
        <el-icon v-if="obj.attributes && obj.attributes.icon">
          <component :is="obj.attributes.icon"></component>
        </el-icon>

        {{ obj.text }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
import { reactive, toRefs, watch, ref } from 'vue'
import XEUtils from 'xe-utils'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const state = reactive({
      count: 0,
    })
    // 面包屑数组
    const breadcrumbList = ref([])

    //1.从本地存储中，获取菜单树
    const menuTree = JSON.parse(localStorage.getItem('menuTree'))
    //2.获取当前路径
    const route = useRoute()

    watch(
      () => route.path,
      () => {
        const path = route.path.replace('/', '')
        console.log('path', path)
        if (path) {
          // 3.查找树
          const myTree = XEUtils.searchTree(menuTree, (item) => item.attributes.url === path)
          // 4.转换为树数组
          if (myTree) {
            breadcrumbList.value = XEUtils.toTreeArray(myTree)
          }
        }
      },
      { immediate: true },
    )

    return {
      breadcrumbList,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
